<template>
  <page-meta :page-style="themeColor"></page-meta>
  <!-- <uni-navbar></uni-navbar> -->
  <view>
    <!-- <view class="category-search">
			<u-search placeholder="请输入关键词" v-model="keyword" :show-action="false" :height="80"></u-search>
		</view> -->
    <view class="category-banner">
      <u-swiper :list="list" height="388" img-mode="widthFix" @click="handleGoSwiper"></u-swiper>
    </view>
    <view id="middle"></view>
    <block v-if="categoryData">
      <block v-for="(item, index) in categoryData.value" :key="index">
        <view v-if="item.componentName == 'GoodsCategory'" id="cat">
          <diy-category @tologin="toLogin" @goCategory="goCategory" ref="category" :value="item" :transShow="transShow"
            :modeClass="modeClass"></diy-category>
        </view>
      </block>
    </block>

    <!-- <scroll-view v-else scroll-y="true" show-scrollbar="false"
			:style="{ height: 'calc(100vh - headerHeight - 55px)' }">
			<view class="bg-index" :style="backgroundUrl">
				<diy-group ref="diyGroup" :diyData="diyData" v-if="diyData.value"></diy-group>
				<view class="padding-bottom"><ns-copy-right></ns-copy-right></view>
			</view>
		</scroll-view> -->

    <!-- 弹窗广告-->
    <template v-if="diyData.global.popWindow.count != -1 && diyData.global.popWindow.imageUrl">
      <view @touchmove.prevent.stop>
        <uni-popup ref="uniPopupWindow" type="center" class="wap-floating" :maskClick="false">
          <view class="image-wrap">
            <image :src="$util.img(diyData.global.popWindow.imageUrl)" :style="popWindowStyle"
              @click="$util.diyRedirectTo(diyData.global.popWindow.link)" mode="aspectFit"></image>
          </view>
          <text class="iconfont icon-round-close" @click="closePopupWindow"></text>
        </uni-popup>
      </view>
    </template>
    <!-- 说接收接收 -->

    <ns-login ref="login"></ns-login>
    <loading-cover ref="loadingCover"></loading-cover>

    <!-- 底部tabBar -->
    <view id="tab-bar">
      <diy-bottom-nav></diy-bottom-nav>
    </view>
  </view>
</template>

<script>
import goodsDetailBase from '@/common/js/goods_detail_base.js';
export default {
  components: {},
  mixins: [goodsDetailBase],
  data() {
    return {
      categoryData: null,
      diyData: {
        global: {
          title: '',
          popWindow: {
            imageUrl: '',
            count: -1,
            link: {},
            imgWidth: '',
            imgHeight: ''
          }
        }
      },
      keyword: "",
      popWindowStyle: {},
      token: "",
      list: [],
      transShow: false,
      modeClass: ['fade'],
    };
  },
  onLoad() {
    uni.hideTabBar()
    this.getHomeInfo()
    this.getDiyInfo()
    this.modeClass = ['slide-bottom']
    this.transShow = true
  },
  onShow() {
    if (this.$refs.category) this.$refs.category[0].pageShow();
  },
  methods: {
    getDiyInfo() {
      this.$api.sendRequest({
        url: '/api/diyview/info',
        data: {
          name: 'DIY_VIEW_GOODS_CATEGORY'
        },
        success: res => {
          if (res.code == 0 && res.data) {
            this.categoryData = res.data;
            if (this.categoryData.value) {
              this.categoryData = JSON.parse(this.categoryData.value);
              if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
            }
            uni.stopPullDownRefresh();
          }
        }
      });
    },
    getHomeInfo() {
      const _this = this
      this.$api.sendRequest({
        url: '/api/diyview/info',
        data: {
          name: 'DIY_VIEW_INDEX'
        },
        success: res => {
          if (res.code == 0 && res.data) {
            this.diyData = res.data;
            if (this.diyData.value) {
              this.diyData = JSON.parse(this.diyData.value);
              if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
            }
            this.diyData.value.map((item) => {
              if (item.componentTitle == "图片广告") {
                console.log(item);
                item.list.map(item2 => {
                  const params = {
                    image: this.$util.img(item2.imageUrl),
                    url: item2.link.wap_url
                  }
                  this.list.push(params)
                })
              }
            })
            if (this.diyData.global.popWindow && this.diyData.global.popWindow.imageUrl) {
              let max_width = 290;
              let max_height = 410;
              // 参照宽高
              let refer_width = 290;
              let refer_height = 290;

              let scale = this.diyData.global.popWindow.imgHeight / this.diyData.global
                .popWindow.imgWidth;
              let width, height;
              if (scale < refer_height / refer_width) {
                width = max_width;
                height = width * scale;
              } else {
                height = max_height;
                width = height / scale;
              }

              let obj = '';
              if (this.diyData.global.popWindow && this.diyData.global.popWindow.count != -
                1 && this.diyData.global
                  .popWindow.imageUrl) {
                obj += 'height:' + (height * 2) + 'rpx;';
                obj += 'width:' + (width * 2) + 'rpx;';
              }
              this.popWindowStyle = obj
            }
            setTimeout(() => {
              this.$refs.uniPopupWindow.open();
            }, 200)


            uni.stopPullDownRefresh();
          }
        }
      })
    },
    toLogin() {
      this.$refs.login.open('/pages/index/index')
    },
    goCategory() {
      setTimeout(() => {
        uni.pageScrollTo({
          scrollTop: 470,
          duration: 1000
        });
      }, 500)
    },
    handleGoSwiper(val) {
      uni.navigateTo({
        url: this.list[val].url
      })
    },
    closePopupWindow() {
      this.$refs.uniPopupWindow.close();
    }
  },
  onReachBottom() {
    this.$refs.category[0].getMoreGoodsList()
  },
  // onShareTimeline() {
  //   this.$api.sendRequest({
  //     url: '/api/member/judgeBuy',
  //     data: {},
  //     success: res => {
  //       console.log(res.data, '/api/member/judgeBuy');
  //       if (res.data) {
  //         return {
  //           title: '鹏城快享',
  //           query: `source_member=${uni.getStorageSync("user_id")}`,
  //           imageUrl: ""
  //         }
  //       } else {
  //         console.log('zheli0');
  //         return {

  //         }
  //       }
  //     }
  //   });
  // },
  // onShareAppMessage() {
  //   return {
  //     title: "鹏城快享",
  //     path: `/pages/index/index?source_member=${uni.getStorageSync("user_id")}`,
  //     imageUrl: ''
  //   }
  // },
};
</script>

<style scoped>
.wap-floating>>>.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
  background: none !important;
  overflow-y: inherit !important;
}

/deep/ .placeholder {
  height: 0;
}

/deep/::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
  display: none;
}

/deep/ .ns-copyright-info {
  margin-top: 40rpx;
  margin-bottom: 0;
}

.image-wrap {
  line-height: normal;
}

.image-wrap image {
  border-radius: 20rpx;
}

/deep/ .iconfont {
  display: block;
  font-size: 60rpx;
  color: #ffffff;
  text-align: center;
}

.category-search {
  margin: 30rpx
}

.category-banner {
  margin: 0 30rpx;
}
</style>

<style lang="scss">
// 分类四一级展开
/deep/ .category-template-4 .template-four .uni-popup__wrapper-box {
  border-radius: 0px 0px 14px 14px !important;
  overflow: hidden;
}

/deep/ .category-template-4 .template-four .uni-popup {
  top: 100rpx;
}

/* #ifndef H5 */
/deep/ .category-template-4 .template-four.wx .uni-popup {
  top: 165rpx;
}

/* #endif */
/deep/ .category-template-4 .content-wrap .categoty-goods-wrap .goods-list {
  margin-top: 30rpx;
}

/deep/ .category-template-4 .content-wrap .goods-list .goods-item .footer-wrap .right-wrap .num-action {
  width: 44rpx;
  height: 44rpx;
}
</style>